<template>
	<view class="content">
		<view class="user-form">
		   <view class="form-item">
		   	  <view class="item-title">
		   	  	姓名：
		   	  </view>
			  <view class="item-value">
			  	<input class="uni-input" v-model="formData.nickname" placeholder="请输入姓名" />
			  </view>
		   </view>	
		   <view class="form-item">
		   	  <view class="item-title">
		   	  	头像：
		   	  </view>
			  <view class="item-value images">
				<view class="upload-image"  @click="chooseImage">
					<image class="uploadImage" :src="$getImageSrc('ic_sc.png')" mode="widthFix"></image>
				</view>
				<view class="upload-image">
					<image class="showImage"  :src="formData.avatar" mode="widthFix center"></image>
				</view>
				<!-- <input style="display: none;" v-model="formData.avatar"></input> -->
			  </view>
		   </view>
		</view>
		<footer-button btnTip='保存' @clickFooter='submitFn'></footer-button>
	</view>
</template>

<script>
	import {updateUserInfo, upload} from "@/untils/api"
	export default {
		data() {
			return {
				alignment:'top',
				isJustShow:false,
				formData:{
					nickname:'',
					avatar:''
				}
			}
		},
		methods: {
			submitFn(){
			   if(!this.formData.nickname){
				   uni.showToast({
					 icon:'none',
					 title:'请输入姓名'
				   })
				   return false
			   }	
			   if(!this.formData.avatar){
				   uni.showToast({
					 icon:'none',
					 title:'请上传头像'
				   })
			   	   return false
			   }
			   updateUserInfo(this.formData).then((res) => {
				   if(res.code - 200 === 0){
					   this.$setStorageSync('userInfo', this.formData)
					   uni.showToast({
						 icon:'none',
						 title:'修改成功',
						 success:() =>{
							uni.switchTab({
								url: '/pages/mine/index'
							 }); 
						 }
					 })
					    
				   }
			   })
			},
			chooseImage(){
				this.$uploadFile().then((res) => {
					this.formData.avatar = res
				})
			}
		},
		onShow(){
			let userInfo = this.$getStorageSync('userInfo') || {}
			if(userInfo.nickname){
				this.formData = userInfo
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100%;
		background-color: #fff;
		flex:1;
	}
	.user-form{
		width: 686rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		.form-item{
			margin-bottom: 30rpx;
			overflow: hidden;
			.item-title{
				line-height: 60rpx;
				font-weight: 800;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
			.item-value{
				.uni-input{
					border-bottom: 1px solid #eee;
					font-size: 28rpx;
					// #ifdef MP-ALIPAY
					width: 100%;
					// #endif
				}
			}
			.images{
				display: flex;
				width: 100%;
				.uploadImage{
					width: 200rpx;
					height: 200rpx;
					margin-right: 40rpx;
					
				}
				.showImage{
					height: 200rpx;
					width: 200rpx;
					// border-radius: 50%;
				}
			}
		}
	}
</style>
